<template lang="">
  <a-layout>
    <a-layout style="padding: 20px 24px 0px">
      <a-layout style="flex-direction: row">
        <a-layout-header style="display: block; text-align: left; height: 380px; width: 70%">
          <div>
            <div style="color: #000">
              <img
                src="../assets/img/good.png"
                alt=""
                style="width: 24px; height: 24px; vertical-align: middle; margin-left: 10px"
              />
              <span> 欢迎回来,我的阿曼达</span>
              <a-divider />
            </div>
          </div>
          <div>
            <div
              id="chart"
              style="width: 300px; height: 300px; padding-left: 60px; float: left"
            ></div>
            <div
              id="chartB"
              style="width: 300px; height: 300px; padding-left: 100px; float: left"
            >
            <!-- <videoPlayer/> -->
          </div>
          </div>
        </a-layout-header>
        <a-layout-sider style="margin-left: 2%; height: 380px; width: 28%">
          <div>
            <a-card hoverable :style="{ width: '100%', marginBottom: '20px' }" :bordered="false">
              <div
                :style="{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between'
                }"
              >
                <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }">
                  <a-avatar :style="{ marginRight: '8px', backgroundColor: '#D49300' }" :size="28">
                    活动
                  </a-avatar>
                  <a-typography-text>最新活动，满一千减一百</a-typography-text>
                </span>
                <a-link>查看</a-link>
              </div>
            </a-card>
          </div>
          <div :style="{ display: 'flex', width: '100%' }">
            <a-card class="card-demo" title="商品最新通知" hoverable :bordered="false">
              <template #extra>
                <a-link>查看详情</a-link>
              </template>
              场科技圈的直播盛事陡然变身舆论风暴中心——360集团灵魂人物周鸿祎，在体验小鹏汇天划时代飞行汽车的直播中，因试飞环节的意外搁浅，情绪瞬间点燃，一幕“怒摘帽”的场景在网络上炸开了锅<br />
            </a-card>
          </div>
          <div>
            <a-card hoverable :style="{ width: '100%' }" :bordered="false">
              <template #cover>
                <div
                  :style="{
                    height: '204px',
                    overflow: 'hidden'
                  }"
                >
                  <img
                    :style="{ width: '100%', transform: 'translateY(-20px)' }"
                    alt="dessert"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                  />
                </div>
              </template>
              <a-card-meta title="Card Title">
                <template #description>
                  Card content <br />
                  Card content
                </template>
              </a-card-meta>
            </a-card>
          </div>
        </a-layout-sider>
      </a-layout>
      <a-layout>
        <a-layout-content style="width: 100%; margin-top: 20px">
          <div
            id="chartDom"
            style="
              width: 90%;
              height: 550px;
              padding: 20px;
              box-sizing: border-box;
              overflow: hidden;
            "
          ></div>
        </a-layout-content>
      </a-layout>
      <a-layout-footer style="text-align: center"
        >Copyright 2024 The Coca-Cola Company. All rights reserved</a-layout-footer
      >
    </a-layout>
  </a-layout>
</template>
<script>
import { getMedicineAPI } from '../api/api.js'
import * as echarts from 'echarts'
import videoPlayer from '../components/videoPlayer.vue'
export default {
  components: {
    // videoPlayer,
  },
  data() {
    return {
      data: [],
    }
  },
  methods: {
    async getMedicine() {
      const res = await getMedicineAPI()
      this.data = res.data
      console.log(this.data)
    },

    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {
          text: '药品'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // name: '销量',
            type: 'line',
            data: [1, 3, 1, 2, 5]
          }
        ]
      }

      chart.setOption(option)
    },
    initChartDom() {
      var chartDom = document.getElementById('chartDom')
      var myChart = echarts.init(chartDom)

      const categories = (function () {
        let now = new Date()
        let res = []
        let len = 10
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
          now = new Date(+now - 2000)
        }
        return res
      })()
      const categories2 = (function () {
        let res = []
        let len = 10
        while (len--) {
          res.push(10 - len - 1)
        }
        return res
      })()
      const data = (function () {
        let res = []
        let len = 10
        while (len--) {
          res.push(Math.round(Math.random() * 1000))
        }
        return res
      })()
      const data2 = (function () {
        let res = []
        let len = 0
        while (len < 10) {
          res.push(+(Math.random() * 10 + 5).toFixed(1))
          len++
        }
        return res
      })()
      var option = {
        title: {
          // text: 'Dynamic Data'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: categories
          },
          {
            type: 'category',
            boundaryGap: true,
            data: categories2
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: 'Price',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: 'value',
            scale: true,
            name: 'Order',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: 'Dynamic Bar',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data
          },
          {
            name: 'Dynamic Line',
            type: 'line',
            data: data2
          }
        ]
      }
      app.count = 11
      setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
        data.shift()
        data.push(Math.round(Math.random() * 1000))
        data2.shift()
        data2.push(+(Math.random() * 10 + 5).toFixed(1))
        categories.shift()
        categories.push(axisData)
        categories2.shift()
        categories2.push(app.count++)
        myChart.setOption({
          xAxis: [
            {
              data: categories
            },
            {
              data: categories2
            }
          ],
          series: [
            {
              data: data
            },
            {
              data: data2
            }
          ]
        })
      }, 2100)

      option && myChart.setOption(option)
    }
  },
  created() {
    this.getMedicine()
  },
  mounted() {
    this.initChart()
    this.initChartDom()
  }
}
</script>

<style lang="css" scoped>
.zr_0 {
  width: 100px;
  height: 50px;
}

.card-demo {
  width: 360px;
  transition-property: all;
}

.card-demo:hover {
  transform: translateY(-4px);
}
</style>
